<template>
  <view>
    <u-notice-bar bgColor="#EEF1FF" color="#333333" :text="notice"></u-notice-bar>
    <view class="header padding">
      <u--input prefixIcon="phone-fill" prefixIconStyle="font-size: 22px;color: #4262F1" placeholder="请输入手机号码"
        border="bottom" clearable v-model="value" fontSize="17px"></u--input>
    </view>
    <view v-for="(operator, operatorIndex) in operatorList" :key="operatorIndex">
      <view class="header">
        <view class="title">{{ operator.name }}</view>
      </view>
      <view class="buy">
        <view class="number">
          <view class="list">
            <view :class="pickedId == item.id ? 'item real' : 'item'" v-for="(item, index) in operator.list"
              :key="index" @click="pick(item.id)">
              <view class="card">
                <view class="top">
                  <text>{{ item.number }}<span class="fz12">元</span></text>
                </view>
                <text class="money">售价:{{ item.money }}元</text>
                <text class="price">代理价:{{ item.price }}元</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="buy">
      <view :show="showNoVipCard" class="header position">
        <img class="img" src="/static/bg.png" alt="" srcset="" />
        <div class="cards">加入充值代理</div>
        <div class="goshop">每单可享受最高5元返现</div>
        <div class="buy-button" @click="show = true">去加入</div>
      </view>
	  <view :show="showVipCard" class="header position">
	    <img class="img" src="/static/bg.png" alt="" srcset="" />
	    <div class="cards">代理会员</div>
	    <div class="goshop">有效期：</div>
	    <div class="buy-button" @click="show = true">去续费</div>
	  </view>
      <view class="tip">
        <view class="title-wrapper">
          <div class="blue-box"></div>
          <text class="titl">充值说明</text>
        </view>
        <view>
          <markdown-render :sourceMdContent="content" :showCursor="false"></markdown-render>
<!--          <zero-markdown-view :markdown="content"></zero-markdown-view>-->
        </view>
      </view>
    </view>

    <u-popup :show="show" @close="close" mode="bottom" :round="20" closeable>
      <view class="number">
        <view class="lists">
          <div class="titles">代理购买</div>
          <div style="display: flex;padding: 15px;background: white;">
            <view :class="num == item.id ? 'item real' : 'item'" v-for="item in list" :key="item.id"
              @click="pickcard(item.id)" style="margin:10px">
              <view class="card">
                <view class="top">
                  <text style="font-size: 13px;">{{ item.name }}</text>
                </view>
                <text class="money"><span style="font-size: 12px;">￥</span>{{ item.pay_price }}</text>
                <text class="price">￥{{ item.price }}</text>
              </view>
            </view>
          </div>

          <div style="display: flex;background: white;width: 100%;margin: 10px 0;">
            <view style="margin:5px;width: 100%;">
              <view class="card">
                <view class="top" style="display: flex;align-items: center;justify-content: space-between;">
                  <div style="display: flex;align-items: center;">
                    <img style="width: 40px;height: 40px;margin: 10px;" src="/static/7.png" alt="" srcset="">
                    <text style="font-size: 13px;">微信支付</text>
                  </div>
                  <img style="width: 20px;height: 20px;margin: 10px;" src="/static/8.png" alt="" srcset="">
                </view>
              </view>
            </view>
          </div>

          <div style="display: flex;background: white;width: 100%;margin: 10px 0;padding-top: 20px;">
            <u-button style="width: 90%;" shape="circle" color="#4262F1" type="primary" text="确定"
              @click="pay_price"></u-button>
          </div>
        </view>
      </view>
    </u-popup>

    <u-toast ref="uToast"></u-toast>

    <!-- 非会员图片弹框 -->
    <u-popup :show="showVipPopup" @close="showVipPopup = false" mode="center" :round="20" closeable>
      <view class="vip-popup">
        <image :src="vipPopupImage" mode="widthFix" class="vip-popup-image" />
        <view class="vip-popup-content">
          <text class="vip-popup-message">您还不是会员，享受更多优惠请购买会员卡</text>
          <u-button shape="circle" color="#4262F1" type="primary" text="去购买" @click="show = true;showVipPopup=false"></u-button>
        </view>
      </view>
    </u-popup>


  </view>

</template>

<script>
import { indexfetch, addPreOrder, getVipList, buyVip } from "@/api/apiService.js";
export default {

  data() {
    return {
      notice: "", // 公告
      content: "", // 充值说明
      pickedId: null, //选中的卡片
      operatorList: [],
      value: "",
      show: false,
      list: [],
      num: null,
      showVipPopup: false, // 控制非会员弹框的显示与隐藏
      showVipCard: false, // 控制非会员弹框的显示与隐藏
      showNoVipCard: true, // 控制非会员弹框的显示与隐藏
      vipPopupImage: '/static/vip-popup.png', // 弹框图片路径
    };
  },

  mounted() {
    const userInfo = this.$route.query;
    if (!localStorage.getItem("token") || userInfo.token){
      localStorage.setItem("app", userInfo.app);
      localStorage.setItem("salt", userInfo.salt);
      localStorage.setItem("token", userInfo.token);
    }
    this.indexList();
    this.getVipList()
  },

  methods: {
    async pay_price() {
      const params = {
        cardId: this.num
      }

      try {
        const response = await buyVip(params);
        const { mp_app_id, timeStamp, nonceStr, paySign, package: packageValue } = response.data;

        WeixinJSBridge.invoke('getBrandWCPayRequest', {
          "appId": mp_app_id,
          "timeStamp": timeStamp,
          "nonceStr": nonceStr,
          "package": packageValue,
          "signType": "RSA",
          "paySign": paySign
        }, (res) => {
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            this.$refs.uToast.show({ message: '支付成功' });
          } else {
            console.log("支付失败", res);
          }
        });
      } catch (error) {
        console.error("请求预订单失败", error);
      }
    },

    // 获取会员卡列表
    async getVipList() {
      const response = await getVipList()
      this.list = response.data.list
    },

    // 关闭购买弹窗
    close() {
      this.show = false
    },

    // 选中购买内容
    pickcard(index) {
      this.num = index;
    },

    async indexList() {
      const response = await indexfetch();
      console.log(response.code)
      if (response.code === 90098) {
        window.location.href = response.data.url;
      } else {
		this.notice = response.data.notice || "";
		this.content = response.data.content || "";
    if(response.data.list)
    {
      this.operatorList = Object.keys(response.data["list"]["1"]).map(
          (key) => {
            const operator = response.data["list"]["1"][key];
            const list = Object.keys(operator)
                .filter((subKey) => !isNaN(parseInt(subKey)))
                .map((subKey) => {
                  return {
                    number: operator[subKey].price.toString(),
                    money: operator[subKey].pay_price.toString(),
                    price: operator[subKey].vip_price.toString(),
                    id: operator[subKey].id.toString(),
                  };
                });
            return {
              name: operator.name,
              list: list,
            };
          }
      );
    }



        // 检查 isVip 状态
        if (response.data.isVip === 0) {
          this.showVipPopup = true; // 显示非会员弹框
          this.showVipCard = true;
          this.showNoVipCard = false;
        }else{
		      this.showVipPopup = false; // 关闭会员弹框
          this.showVipCard = false;
          this.showNoVipCard = true;
		    }
      }
    },

    // 点击卡片支付功能
    async pick(index) {
      const mobilePattern = /^1[3-9]\d{9}$/; // 简单的手机号格式校验正则表达式
      if (!this.value) {
        this.$refs.uToast.show({ message: '请输入手机号码' });
        this.pickedId = null; // 取消选中的样式
        return;
      } else if (!mobilePattern.test(this.value)) {
        this.$refs.uToast.show({ message: '手机号格式不对' });
        this.pickedId = null; // 取消选中的样式
        return;
      }

      this.pickedId = index;
      const params = {
        mobile: this.value,
        pro_id: index,
        tab: "addPreOrder",
        user_id: "1",
      };

      try {
        const response = await addPreOrder(params);
        const { mp_app_id, timeStamp, nonceStr, paySign, package: packageValue } = response.data;

        WeixinJSBridge.invoke('getBrandWCPayRequest', {
          "appId": mp_app_id,
          "timeStamp": timeStamp,
          "nonceStr": nonceStr,
          "package": packageValue,
          "signType": "RSA",
          "paySign": paySign
        }, (res) => {
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            this.$refs.uToast.show({ message: '支付成功' });
          } else {
            console.log("支付失败", res);
          }
        });
      } catch (error) {
        console.error("请求预订单失败", error);
      }
    }
  },

  watch: {},
};
</script>

<style scoped lang="scss">
.vip-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  //padding: 15px;
  //background-color: #fff;
  border-radius: 15px;
  width: 70%;
  max-width: 230px;
  margin-left: 40px;
  margin-top: 30px;
}

.vip-popup-image {
  width: 100%;
  border-radius: 10px;
}

.vip-popup-content {
  margin-top: 15px;
  text-align: center;
}

.vip-popup-message {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}

.titles {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
  background-color: #F6F6F6;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.number {
  display: flex;
  flex-direction: column;
  align-items: center;

  .lists {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #F6F6F6;

    .item {
      border: 1px solid white;
      width: 194rpx;
      height: 110px;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      display: flex;

      .card {
        width: 194rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .top {
          display: flex;
          align-items: center;

          >text {
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #666666;
            line-height: 44rpx;
          }

          >image {
            width: 30rpx;
            height: 30rpx;
          }
        }

        .money {
          font-size: 48rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4262F1;
          line-height: 34rpx;
          margin-top: 15px;
          margin-bottom: 15px;
        }

        .price {
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 34rpx;
          margin-top: 12rpx;
        }
      }
    }

    .real {
      border: 2rpx solid #f88700;
    }

    &:after {
      content: '';
      width: 194rpx;
    }
  }

  .sure {
    width: 582rpx;
    height: 80rpx;
    background: #ff6a5f;
    border-radius: 40rpx;
    text-align: center;

    >text {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 80rpx;
    }
  }
}

.goshop {
  position: absolute;
  top: 47px;
  left: 50px;
  color: white;
  font-size: 12px;
  font-weight: 350;
}

.cards {
  position: absolute;
  top: 20px;
  left: 50px;
  color: white;
  font-size: 17px;
  font-weight: 700;
}

.img {
  width: 100%;
}

.position {
  position: relative;
}

.fz12 {
  font-size: 12px;
}

.padding {
  padding: 20px 20px 0px 20px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-box {
  width: 5px;
  height: 15px;
  background-color: #4262f1;
  margin-right: 5px;
  border-radius: 30px;
}

.buy-button {
  position: absolute;
  right: 50px;
  background-color: white;
  font-size: 12px;
  font-weight: 500;
  color: #5d96fb;
  padding: 5px 10px;
  border-radius: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 40rpx 0 40rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.buy {
  width: 100%;
  height: 100%;

  .number {
    width: 100%;
    background-color: #ffffff;
    margin-top: 18rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 40rpx 0 40rpx;

      .item {
        border: 1px solid white;
        width: 194rpx;
        height: 194rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        display: flex;

        .card {
          width: 194rpx;
          height: 194rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .top {
            display: flex;
            align-items: center;

            >text {
              font-size: 32rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #666666;
              line-height: 44rpx;
              margin-right: 12rpx;
            }

            >image {
              width: 30rpx;
              height: 30rpx;
            }
          }

          .money {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #e38636;
            line-height: 34rpx;
            margin-top: 12rpx;
          }

          .price {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4262f1;
            line-height: 34rpx;
            margin-top: 12rpx;
          }
        }
      }

      .real {
        border: 2rpx solid #f88700;
      }

      &:after {
        content: "";
        width: 194rpx;
      }
    }

    .sure {
      width: 582rpx;
      height: 80rpx;
      background: #ff6a5f;
      border-radius: 40rpx;
      text-align: center;

      >text {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 80rpx;
      }
    }
  }

  .tip {
    background: #ffffff;
    margin-top: 18rpx;
    padding: 40rpx;

    .titl {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #666666;
      line-height: 40rpx;
    }

    >view {
      >text {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        line-height: 32rpx;
      }

      &:nth-child(2) {
        >text:nth-child(2) {
          color: #333333;
        }
      }

      &:nth-child(5) {
        >text:nth-child(2) {
          color: #ff6a5f;
          font-weight: 600;
          border-bottom: 2rpx solid #ff6a5f;
        }
      }
    }
  }
}
</style>
